<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>React的条件渲染</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
     <div id = "example"></div>
	   <script type="text/babel">


           /**
            *  设置状态方式
			*  方式一：
            *  设置setState({
			*      param : 'param value'
			*  });
			*
			*  方式二：
            *  setState(
			*   (state) => ({
			*      param : 'param value'
			*   })
			*
			*  );
            *
            *
            *
            *
            *
            *
            *
            * **/

    class LoginControl extends React.Component{

       //1.初始化构造函数
       constructor(props){
         super(props);
        this.state = {
          isLogin : false,
          message : '开始登录'
        }

        //绑定事件
        this.loginEvent = this.loginEvent.bind(this);
        //绑定事件
        this.logOutEvent = this.logOutEvent.bind(this);

      }

      //登录事件
      loginEvent(){
       this.setState(
       {
          isLogin : true,
          message : '登录成功！！' 
       });
       alert(this.state.message);
      };

      //退出登录
      logOutEvent(){
        this.setState({
          isLogin : false,
          message : '退出登录成功！！' 
         });

         alert(this.state.message);
      };

      /****条件判断语句实现方式
      render(){
          const isLogin = this.state.isLogin;
          let btn = null;
          if(isLogin){
           btn = <button onClick={this.logOutEvent}>退出登录</button>
          }else{
            btn = <button onClick={this.loginEvent}>开始登录</button>
           }
             
         return(
                <div>
                <Greeting isLogin={isLogin} />
                   {btn}
                </div>
         );
      };***/

       
       //三目运算实现方式
      render(){
          const isLogin = this.state.isLogin;
         return(
                <div>
                <Greeting isLogin={isLogin} />
                <div>
                  {
                    isLogin?(<button onClick={this.logOutEvent}>退出登录</button>) :(<button onClick={this.loginEvent}>开始登录</button>)
                    
                   }
                </div>
                </div>
         );
      };
    }


     function UserGreeting(){
        return <h1>欢迎回来！！！，登录成功</h1>
     }

    function GuestGreeting(){
        return <h1>请登录。</h1>
     }

     function Greeting(props) {
      const isLogin = props.isLogin;
      if (isLogin) {
        return <UserGreeting />;
      }
        return <GuestGreeting />;
      }


      function App(){

       return(
           <div>
             <LoginControl/>
           </div>
           );
      } 

     /**4.渲染**/
    ReactDOM.render(
      <App/>,
      document.getElementById('example')
    );


	   </script>
</body>
</html>